import { Button, Input, Select, message, ConfigProvider, Table } from 'antd';
import React from 'react';
import { useState } from 'react';
import style from './index.module.less';
import { RenderEmpty } from '@/comp/RenderEmpty';
import { BookInfo } from '@/types';
import { findBookInfoByFlag, translateT2S } from '@/apis';
import { fixLongText, fixNullData, fixNullPage } from '@/utils';
import RightBar from '@/comp/RightBar';

const { Column } = Table;
const FindPage: React.FC = () => {
  const [messageApi, contextHolder] = message.useMessage();
  const [booksInfo, setBooksInfo] = useState<BookInfo[]>([]);
  const [findInfo, setFindInfo] = useState<string>('');
  const [matchFlag, setMatchFlag] = useState<string>('bookName');

  const handleChangeInputInfo = (mess: string) => {
    setFindInfo(mess);
  };

  const handleChangeMatchFlag = (thisMatchFlag: string) => {
    console.log(thisMatchFlag);
    setMatchFlag(thisMatchFlag);
  };

  /**
   * 用于翻译
   *
   */
  const clickTranslateMessage = (message: string) => {
    // console.log(message);
    translateT2S(message).then((res) => {
      messageApi.info(res.data);
    });
  };

  const flushInfo = () => {
    // console.log(findInfo);
    if (findInfo === '') {
      messageApi.error('请输入信息后查询！');
    } else {
      messageApi.info(`搜索 "${findInfo}"中...`);
      // console.log(matchFlag, findInfo);
      findBookInfoByFlag(matchFlag, findInfo).then((res) => {
        // console.log(res.data);
        setBooksInfo(res.data);
        messageApi.success(`检索到${res.data.length}条内容！`);
      });
    }
  };

  const findBookNameFromRightBar = (bookName: string) => {
    setFindInfo(bookName);
    setMatchFlag('bookName');
    findBookInfoByFlag('bookName', bookName).then((res) => {
      setBooksInfo(res.data);
      messageApi.success(`检索到${res.data.length}条内容！`);
    });
  };

  return (
    <>
      {contextHolder}
      <div className={style.pageMainTitle}>
        文天祥研究古籍与民国文献资源平台
      </div>
      <br />
      <div>
        <Input.Group compact style={{ height: '50px' }}>
          <Select
            defaultValue="bookName"
            style={{ width: 200 }}
            onChange={handleChangeMatchFlag}
            options={[
              {
                value: 'dynasty',
                label: '朝代',
              },
              {
                value: 'yearTitle',
                label: '年号',
              },
              {
                value: 'bookName',
                label: '书籍名称',
              },
              {
                value: 'author',
                label: '作者',
              },
              {
                value: 'context',
                label: '内容',
              },
            ]}
            value={matchFlag}
          />
          <Input
            style={{
              width: 'calc(100% - 262px)',
            }}
            defaultValue=""
            placeholder="请在此输入搜索内容"
            onChange={(e) => {
              handleChangeInputInfo(e.target.value);
            }}
            value={findInfo}
          />
          <Button type="primary" onClick={flushInfo}>
            检索
          </Button>
        </Input.Group>
      </div>
      <div style={{ display: 'flex' }}>
        <div style={{ width: 'calc(100% - 200px)' }}>
          <ConfigProvider renderEmpty={RenderEmpty}>
            <Table dataSource={booksInfo}>
              <Column
                title="朝代"
                dataIndex="dynasty"
                key="dynasty"
                sorter={(a: BookInfo, b: BookInfo) => {
                  return fixNullData(a.dynasty).localeCompare(
                    fixNullData(b.dynasty),
                  );
                }}
                render={(text) => {
                  return <>{fixNullData(text)}</>;
                }}
              ></Column>
              <Column
                title="年号"
                dataIndex="yearTitle"
                key="yearTitle"
                sorter={(a: BookInfo, b: BookInfo) => {
                  return fixNullData(a.yearTitle).localeCompare(
                    fixNullData(b.yearTitle),
                  );
                }}
                render={(text) => {
                  return <>{fixNullData(text)}</>;
                }}
              ></Column>

              <Column
                title="书籍出处"
                dataIndex="bookName"
                key="bookName"
              ></Column>
              <Column
                title="作者"
                dataIndex="author"
                key="author"
                render={(text) => {
                  return <>{fixNullData(text)}</>;
                }}
              ></Column>
              <Column
                title="相关内容"
                dataIndex="context"
                key="context"
                render={(text) => {
                  return (
                    <>
                      <div
                        onClick={() => {
                          clickTranslateMessage(text);
                        }}
                      >
                        {fixLongText(text, 30)}
                      </div>
                    </>
                  );
                }}
              ></Column>
              <Column
                title="页码"
                dataIndex="page"
                key="page"
                render={(text) => {
                  return <>{fixNullPage(text)}</>;
                }}
              ></Column>
            </Table>
            <div>共检索到{booksInfo.length}条数据</div>
          </ConfigProvider>
        </div>
        <div className={style.rightBar}>
          <RightBar findBookName={findBookNameFromRightBar}></RightBar>
        </div>
      </div>
    </>
  );
};

export default FindPage;
